import React from 'react'
import PropTypes from 'prop-types'
import {Card, Menu} from 'antd'
import './RoleMenu.less'

const RoleMenu = ({
                    roles,
                    selectedRoleId,
                    handleRoleMenuClick,
                  }) => {

  const defaultSelectedKeys = [selectedRoleId + '']

  const getItems = (roles.length > 0
    ? roles.map(item => (<Menu.Item onClick={() => {handleRoleMenuClick(item)}} key={item.id}>{item.name + '(' + (item.count || 0) + ')'}</Menu.Item>))
    : undefined)

  return (
    <Card className={"custom-card-body"} title={'角色列表'} style={{width: '100%'}}>
      <Menu selectedKeys={defaultSelectedKeys}>
        {getItems}
      </Menu>
    </Card>
  )
}

RoleMenu.propTypes = {
  roles: PropTypes.array,
  selectedRoleId: PropTypes.number,
  handleRoleMenuClick: PropTypes.func,
}

export default RoleMenu
